<template>
  <!-- 头部 -->
  <header id="blog-header">
    <div class="header-container">
      <div class="logo lf clear" @click="doLogoClick">
        <img title="SNBLOG" class="logo-img lf" src="/images/logo.png">
        <strong class="logo-title lf">SNBLOG</strong>
        <h1 class="site-name lf">达文西的快乐星球</h1>
      </div>
      <div class="search rf clear">
        <input class="search-input lf" placeholder="搜索想要查找的内容" v-model="keyword" @keyup.enter="doSearch"/>
        <button class="search-input-btn lf" @click="doSearch">
          <Icon size="16px" name="material-symbols:search" />
        </button>
      </div>
    </div>
  </header>
  <header id="blog-header-wap" v-show="!wapSearchShow">
    <Icon size="0.42rem" name="humbleicons:bars" @click="doWapNavShow"/>
    <div class="logo">
      <img title="SNBLOG" class="logo-img" src="/images/logo.png">
      <strong class="logo-title">SNBLOG</strong>
    </div>
    <Icon size="0.42rem" name="material-symbols:search"  @click="doWapSearch"/>
  </header>
  <div id="blog-header-wap-search" v-show="wapSearchShow">
    <input ref="wapSearchInput" v-model="keyword" @keyup.enter="doSearch">
    <Icon size="0.42rem" name="ci:close-md"  @click="doCloseWapSearch"/>
  </div>
  <div id="blog-header-wap-nav-shade" v-show="wapNavShow" @click="doCloseWapNav"></div>
  <nav id="blog-header-wap-nav" :style="{left:wapNavShow?'0':'-5rem'}">
    <div class="user-info">
      <div class="headimg">
        <img title="头像" src="/images/headimg.jpg">
      </div>
      <span class="nickname">达文西</span>
    </div>
    <a class="nav classify-nav ellipsis" :class="[route.name=='index'?'active':'']" @click="doIndex">
      <img title="首页" src="/images/home.png">
      <span>首页</span>
    </a>
    <a class="nav classify-nav ellipsis" v-for="item in classifyList" :key="item.id" :class="[!item.icon?'no-icon':'',route.name=='classify'&&route.query.classifyId==item.id?'active':'']" @click="doClassify(item)">
      <img :title="item.name" v-if="item.icon" :src="`${apiBase}/${item.icon}`">
      <span>{{item.name}}</span>
    </a>
    <a class="nav link-nav ellipsis" v-for="item in linkList" :class="[!item.icon?'no-icon':'']" :key="item.id" :href="item.link" target="_blank">
      <img :title="item.name" v-if="item.icon" :src="`${apiBase}/${item.icon}`">
      <span>{{item.name}}</span>
    </a>
  </nav>
</template>

<script setup lang="ts">
const { public: { apiBase } } = useRuntimeConfig()
const route = useRoute()
const keyword = ref('')
const wapSearchInput = ref<HTMLElement|null>(null)
const wapSearchShow = ref(false)
const wapNavShow = ref(false)
interface classify {
  id:number,
  icon:string,
  name:string
}
interface link {
  id:number,
  icon:string,
  name:string,
  link:string
}
interface Props {
  classifyList:classify[],
  linkList:link[]
}
const props = withDefaults(defineProps<Props>(), {
    classifyList: () => {return []},
    linkList: () => {return []}
})
// 点击logo
const doLogoClick = async () => {
  await navigateTo({
    path: '/'
  })
}
// 获取关键字
const getKeyword = () => {
  if(route.name=='search'){
    keyword.value = String(route.query.keyword)
  }else{
    keyword.value = ''
  }
}
// 搜索
const doSearch = async () => {
  if(keyword.value){
    await navigateTo({
      path: '/search',
      query:{
        keyword:keyword.value
      }
    })
  }else{
    await navigateTo({
      path: '/'
    })
  }
}
// 移动端导航栏显示/隐藏
const doWapNavShow = () => {
  wapNavShow.value = !wapNavShow.value
}
const doCloseWapNav = () => {
  wapNavShow.value = false
}
// 移动端搜索
const doWapSearch = () => {
  wapSearchShow.value = true
  setTimeout(()=>{
    wapSearchInput.value && wapSearchInput.value.focus()
  })
}
// 移动端搜索框关闭
const doCloseWapSearch = () => {
  wapSearchShow.value = false
}
const doIndex = async () => {
  await navigateTo({
    path:'/'
  })
  doCloseWapNav()
}
const doClassify = async (item:classify) => {
  await navigateTo({
    path:'/classify',
    query:{
      classifyId:item.id
    }
  })
  doCloseWapNav()
}
onMounted(()=>{
  getKeyword()
})
</script>

<style lang="less">
  #blog-header{
    display:none;
    position:fixed;
    top:0;
    left:0;
    z-index:100;
    width:100%;
    height:60px;
    line-height:60px;
    background:rgba(255,255,255,.6);
    backdrop-filter: blur(5px);
    .header-container{
      width:1050px;
      margin:0 auto;
    }
    .logo{
      cursor: pointer;
    }
    .logo-img{
      width:44px;
      margin-top:7px;
    }
    .logo-title{
      font-size:24px;
      color:#0088F5;
    }
    .site-name{     
      margin:2px 0 0 40px;
      font-size:14px;
      font-weight:bold;
      color:#0088F5;
    }
    .search{
      margin-top:16px;
    }
    .search-input{
      width:200px;
      height:28px;
      padding:5px;
      background:#E8E8E8;
      transition: background .2s;
      &:hover{
        background:#DEDEDE;
      }
    }
    .search-input-btn{
      width:28px;
      height:28px;
      text-align:center;
      line-height:24px;
      background:#CFCFCF;
      transition: background .2s;
      &:hover{
        background:#C2C2C2;
      }
    }
  }
  #blog-header-wap{
    display:none;
    position:fixed;
    justify-content:space-between;
    align-items:center;
    top:0;
    left:0;
    z-index:100;
    width:100%;
    height:1.2rem;
    padding:0.6rem;
    background:rgba(255,255,255,.6);
    backdrop-filter: blur(5px);
    .logo{
      display:flex;
      align-items:center;
      .logo-img{
        width:0.7rem;
      }
      .logo-title{
        font-size:0.36rem;
        color:#0088F5;
      }
    }
  }
  #blog-header-wap-search{
    position:fixed;
    display:flex;
    align-items:center;
    padding:0 0.6rem 0 0.3rem;
    top:0;
    left:0;
    z-index:100;
    width:100%;
    height:1.2rem;
    line-height:1.2rem;
    background:#fff;
    input{
      flex:1;
      padding-right:0.2rem;
      font-size:0.28rem;
      color:rgba(0,0,0,.68);
    }
  }
  #blog-header-wap-nav-shade{
    position:fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:rgba(255,255,255,.6);
    backdrop-filter: blur(5px);
    z-index:1000;
  }
  #blog-header-wap-nav{
    position:fixed;
    width:5rem;
    height:100%;
    top:0;
    z-index:1100;
    background:#34393D;
    transition: left .3s;
    overflow:auto;
    .user-info{
      display:flex;
      align-items:center;
      padding:0.48rem;
      border-bottom:1px solid #2D3135;
      .headimg{
        width:1.16rem;
        height:1.16rem;
        margin-right:0.2rem;
        border:2px solid #fff;
        border-radius:50%;
        >img{
          width:100%;
          height:100%;
          border-radius:50%;
        }
      }
      .nickname{
        font-size:0.36rem;
        font-weight:700;
        color:#fff;
      }
    }
    .nav{
      display:block;
      padding:0 15px;
      margin-bottom:7.5px;
      line-height:42px;
      font-weight:bold;
      letter-spacing:1px;
      border-radius:4px;
      color:#fff;
      &.classify-nav:hover,&.classify-nav.active{
        color:#0088f5;
      }
      &.link-nav{
        color:#ff5722;
        &:hover{
          background:#fff;
        }
      }
      &.no-icon{
        padding-left:48px;
      }
      >img{
        width:16px;
        max-height:20px;
        margin-right:12px;     
        vertical-align: middle
      }
      >span{
        vertical-align: middle
      }
    }
  }
  @media screen and (min-width: 1049px) {
    #blog-header {
      display:block;
    }
  }
  @media screen and (max-width: 1050px) {
    #blog-header-wap {
      display:flex;
    }
  }
</style>